<template>
  <div class="ResidualAdmin">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="工单时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['orderTime']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="工单号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['workNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findAgentDailyBillPageList()">查询</a-button>
            <a-button type="dashed" @click="listExport()">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-row :gutter="30">
        <a-col :span="8">
          <a-card>
            <a-row :gutter="0">
              <a-col :span="8">
                <img src="../../assets/实际入账.png" alt />
              </a-col>
              <a-col :span="15">
                <a-row :gutter="40" style="font-size:1rem;">
                  <a-col :span="18">实际入账总额：</a-col>
                  <a-col :span="5">
                    <a-icon type="info-circle" />
                  </a-col>
                </a-row>
                <a-row
                  :gutter="0"
                  style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                >{{sumInAmount}}</a-row>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card>
            <a-row :gutter="0">
              <a-col :span="8">
                <img src="../../assets/微信入账.png" alt />
              </a-col>
              <a-col :span="15">
                <a-row :gutter="40" style="font-size:1rem;">
                  <a-col :span="18">微信收入：</a-col>
                  <a-col :span="5">
                    <a-icon type="info-circle" />
                  </a-col>
                </a-row>
                <a-row
                  :gutter="0"
                  style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                >{{sumWxAmount}}</a-row>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card>
            <a-row :gutter="0">
              <a-col :span="8">
                <img src="../../assets/代理商收入.png" alt />
              </a-col>
              <a-col :span="15">
                <a-row :gutter="40" style="font-size:1rem;">
                  <a-col :span="18">代理商收入总额：</a-col>
                  <a-col :span="5">
                    <a-icon type="info-circle" />
                  </a-col>
                </a-row>
                <a-row
                  :gutter="0"
                  style="font-size:1.8rem;margin-top:0.5em;color: rgb(16, 144, 255);"
                >{{sumAgentAmount}}</a-row>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="30" style="margin-top:2%">
        <a-col :span="8">
          <a-card>
            <a-row :gutter="0">
              <a-col :span="8">
                <img src="../../assets/总部分润.png" alt />
              </a-col>
              <a-col :span="15">
                <a-row :gutter="40" style="font-size:1rem;">
                  <a-col :span="18">总部分润总额：</a-col>
                  <a-col :span="5">
                    <a-icon type="info-circle" />
                  </a-col>
                </a-row>
                <a-row
                  :gutter="0"
                  style="font-size:1.8rem;margin-top:0.5em;color: rgb(19,194,194);"
                >{{sumVendorAmount}}</a-row>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card>
            <a-row :gutter="0">
              <a-col :span="8">
                <img src="../../assets/合作方分润.png" alt />
              </a-col>
              <a-col :span="15">
                <a-row :gutter="40" style="font-size:1rem;">
                  <a-col :span="18">合作方分润：</a-col>
                  <a-col :span="5">
                    <a-icon type="info-circle" />
                  </a-col>
                </a-row>
                <a-row
                  :gutter="0"
                  style="font-size:1.8rem;margin-top:0.5em;color: rgb(250,204,20);"
                >{{sumpartnerAmount}}</a-row>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.id"
        :bordered="true"
      >
        <template slot="operation" slot-scope="text,record">
          <div class="blue" @click="detailsModal(text,record)">详情</div>
        </template>
      </a-table>
    </a-card>
    <a-modal
      title="工单详情"
      :visible="detailsVisible"
      @ok="detailsOk"
      @cancel="detailsCancel"
      :footer="null"
      :width="1100"
    >
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="6">
            <a-form-item label="订单号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'orderNumber',
          {rules: [{ required: true, message: '请输入订单号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="支付号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'payNumber',
          {rules: [{ required: true, message: '请输入支付号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="5" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findDailyBillDetailsPageList()">查询</a-button>
            <a-button type="dashed" @click="listDetailsExport()">导出</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :columns="columnsDetails"
        :dataSource="dataDetails"
        :pagination="false"
        :rowKey="record => record.id"
        :bordered="true"
      >
        <template slot="billType" slot-scope="text,record">
          <span>{{record.type==3?'已付款':record.type==4?'已退款':''}}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "工单起始时间",
    dataIndex: "payTime",
    scopedSlots: { customRender: "phone" },
    align: "center"
  },
  {
    title: "工单生成时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "userType" },
    align: "center"
  },
  {
    title: "工单号",
    dataIndex: "code",
    scopedSlots: { customRender: "workOrderNumber" },
    align: "center"
  },
  {
    title: "入账金额",
    dataIndex: "inAmount",
    scopedSlots: { customRender: "entryValueSum" },
    align: "center"
  },
  {
    title: "微信金额",
    dataIndex: "wxAmount",
    scopedSlots: { customRender: "wechatAmount" },
    align: "center"
  },
  {
    title: "总部分润",
    dataIndex: "vendorSharingAmount",
    scopedSlots: { customRender: "headquartersFenRun" },
    align: "center"
  },
  {
    title: "合作方分润",
    dataIndex: "partnerSharingAmount",
    scopedSlots: { customRender: "partnersShareProfits" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];
const columnsDetails = [
  {
    title: "订单号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "支付号",
    dataIndex: "payTn",
    scopedSlots: { customRender: "payNumber" },
    align: "center"
  },
  {
    title: "账单类型",
    dataIndex: "typeName",
    scopedSlots: { customRender: "billType" },
    align: "center"
  },
  {
    title: "订单金额",
    dataIndex: "paidAmount",
    scopedSlots: { customRender: "orderAmount" },
    align: "center"
  },
  {
    title: "入账金额",
    dataIndex: "inAmount",
    scopedSlots: { customRender: "recordedAmount" },
    align: "center"
  },
  {
    title: "总部分润",
    dataIndex: "vendorSharingAmount",
    scopedSlots: { customRender: "headquartersFenRun" },
    align: "center"
  },
  {
    title: "合作方分润",
    dataIndex: "partnerSharingAmount",
    scopedSlots: { customRender: "partnersShareProfits" },
    align: "center"
  },
  {
    title: "手续费",
    dataIndex: "charge",
    scopedSlots: { customRender: "serviceCharge" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];
const dataDetails = [
  {
    key: "1"
  }
];
export default {
  name: "ResidualAdmin",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      visible: false,
      detailsVisible: false,
      columnsDetails,
      dataDetails: [],
      sumAgentAmount: "", //代理商入账总额
      sumInAmount: "", //入账总额
      sumVendorAmount: "", //总部分润总额
      sumpartnerAmount: "", //合作方分润总额
      sumInAmount: "", //入账总额
      sumInAmount: "", //入账总额
      sumWxAmount: "" //微信入账总额
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.findAgentDailyBillPageList();
    },
    detailsModal(text, record) {
      this.detailsVisible = true;
      this.dailyBillId = record.id;
      this.findDailyBillDetailsPageList();
    },
    detailsOk(e) {
      this.detailsVisible = false;
    },
    detailsCancel(e) {
      this.detailsVisible = false;
    },

    // 列表初始化
    listInit() {
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/listInit",
        data: {
          loginToken: this.$store.state.loginToken
        }
      }).then(res => {
        // console.log(res);
      });
    },

    // 代理商工单查询
    findAgentDailyBillPageList() {
      var values = this.form.getFieldsValue();
      if (values.orderTime == undefined) {
        values.orderTime == undefined;
      } else {
        this.startTime = moment(values.orderTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.orderTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/findAgentDailyBillPageList",
        data: {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          code: values.workNumber,
          startTime: this.startTime,
          endTime: this.endTime
        }
      }).then(res => {
        // console.log(res);
        this.data = res.data.data.t.list;
        this.sumAgentAmount = res.data.data.t.sumAgentAmount;
        this.sumInAmount = res.data.data.t.sumInAmount;
        this.sumVendorAmount = res.data.data.t.sumVendorAmount;
        this.sumWxAmount = res.data.data.t.sumWxAmount;
        this.sumpartnerAmount = res.data.data.t.sumpartnerAmount;
        this.pagination.total = res.data.data.total;
        this.pagination.pageSize = res.data.data.pageSize;
        this.pagination.current = res.data.data.pageNum;
      });
    },

    // 代理商工单明细查询
    findDailyBillDetailsPageList() {
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/findDailyBillDetailsPageList",
        data: {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          dailyBillId: this.dailyBillId,
          orderCode:values.orderNumber,
          // payTn:values.
        }
      }).then(res => {
        console.log(res);
        this.dataDetails = res.data.data.list;
        this.pagination.total = res.data.data.total;
        this.pagination.pageSize = res.data.data.pageSize;
        this.pagination.current = res.data.data.pageNum;
      });
    },

    // 代理商工单导出
    listExport() {
      var values = this.form.getFieldsValue();
      if (values.orderTime == undefined) {
        values.orderTime == undefined;
      } else {
        this.startTime = moment(values.orderTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.orderTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/exportDailyBillList",
        data: {
          loginToken: this.$store.state.loginToken,
          code: values.workNumber,
          startTime: this.startTime,
          endTime: this.endTime
        },
        responseType: "arraybuffer"
      }).then(res => {
        // console.log(res);
        if (res.status == "200") {
          const aLink = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          aLink.href = URL.createObjectURL(blob);
          aLink.download = "代理商工单表";
          aLink.click();
          document.body.appendChild(aLink);
        }
      });
    },

    // 代理商工单明细导出
    listDetailsExport() {
      var values = this.form.getFieldsValue();
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/exportDailyBillDetailsList",
        data: {
          loginToken: this.$store.state.loginToken,
          dailyBillId: this.dailyBillId
        },
        responseType: "arraybuffer"
      }).then(res => {
        // console.log(res);
        if (res.status == "200") {
          const aLink = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          aLink.href = URL.createObjectURL(blob);
          aLink.download = "代理商工单明细表";
          aLink.click();
          document.body.appendChild(aLink);
        }
      });
    }
  },
  created() {
    this.listInit();
    this.findAgentDailyBillPageList();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ResidualAdmin {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
</style>
